<template>
	<u-popup :show="is_info" :safeAreaInsetBottom="false" mode="bottom" round="24rpx">
		<view class="userInfo position-relative">
			<view class="position-absolute" style="right: 40rpx; top: 40rpx" @click="is_info = false">
				<u-icon name="close" color="#000" size="34rpx"></u-icon>
			</view>
			<view class="font-34 font-weight-middle">完善个人信息</view>
			<view class="font-28 text-666 m-t-10">完善您的头像、昵称、手机号，主要用于准确发放活动奖品、优惠券，发货等</view>
			<u-line color="#F0F0F0" margin="20rpx 0"></u-line>
			<view class="flex-bet-ali">
				<view class="flex-ali">
					<view class="font-28 m-r-20 label">头像</view>
					<button class="flex-jStart" open-type="chooseAvatar" @chooseavatar="chooseavatar">
						<u-avatar :src="formData.avatar" size="86rpx"></u-avatar>
					</button>
				</view>

				<u-icon name="arrow-right" size="15rpx"></u-icon>
			</view>
			<u-line color="#F0F0F0" margin="20rpx 0"></u-line>
			<view class="flex-bet-ali">
				<view class="flex-ali">
					<view class="font-28 m-r-20 label">昵称</view>
					<input type="nickname" v-model="formData.nickName" placeholder="请输入昵称" />
				</view>
				<u-icon name="arrow-right" size="15rpx"></u-icon>
			</view>
			<u-line color="#F0F0F0" margin="20rpx 0"></u-line>
			<view class="flex-bet-ali">
				<view class="flex-ali">
					<view class="font-28 m-r-20 label">生日</view>
					<input type="nickname" v-model="formData.birthday" disabled @click="monthShow = true" placeholder="请输入xxxx年xx月xx日" />
				</view>
				<u-icon name="arrow-right" size="15rpx"></u-icon>
			</view>
			<u-line color="#F0F0F0" margin="20rpx 0"></u-line>
			<view class="flex-bet-ali">
				<view class="flex-ali">
					<view class="font-28 m-r-20 label">性别</view>
					<up-radio-group v-model="formData.sex" placement="row" shape="square" @change="changeSerive">
						<up-radio activeColor="#1E1E1E" label="男" :name="1"></up-radio>
						<up-radio activeColor="#1E1E1E" label="女" :name="0"></up-radio>
					</up-radio-group>
				</view>
				<u-icon name="arrow-right" size="15rpx"></u-icon>
			</view>
			<u-line color="#F0F0F0" margin="20rpx 0"></u-line>
			<view class="flex-bet-ali">
				<view class="flex-ali">
					<view class="font-28 m-r-20 label">手机号</view>
					<button open-type="getPhoneNumber" class="flex-jStart" @getphonenumber="getphonenumber">
						{{ formData.mobile || '一键授权手机号' }}
					</button>
				</view>
				<u-icon name="arrow-right" size="15rpx"></u-icon>
			</view>
			<u-line color="#F0F0F0" margin="20rpx 0"></u-line>
			<view class="flex align-center justify-center m-y-30 text text-greey">
				<view class="raido m-r-10" @click="isAgree = !isAgree">
					<view class="true" v-if="isAgree"></view>
				</view>
				我已阅读并同意
				<text
					@click="
						show = true;
						rule = 1;
					"
				>
					《用户隐私政策条款》
				</text>
				和
				<text
					@click="
						show = true;
						rule = 2;
					"
				>
					《平台用户协议》
				</text>
			</view>
			<dy-button width="100%" @click="perfect_info">提交</dy-button>
			<!-- 规则弹窗 -->
			<!-- <u-popup :show="show" bgColor="transparent" @close="show = false" mode="center" :safeAreaInsetBottom="false">
				<view class="">
					<view class="popup" :style="{ 'background-image': `url(${ASSETSURL}rule/${rule}/bg.png)` }">
						<view class="content">
							<block v-for="(item, index) in rule == 1 ? 7 : 3" :key="index">
								<image :src="`${ASSETSURL}rule/${rule}/${index + 1}.png`" mode="widthFix" style="width: 100%; height: 300rpx"></image>
							</block>
						</view>
					</view>
					<view class="m-t-60 flex justify-center" @click="show = false" style="100%">
						<u-image :src="ASSETSURL + 'rule/close.png'" width="58rpx" height="58rpx"></u-image>
					</view>
				</view>
			</u-popup> -->
		</view>
		<up-datetime-picker
			mode="date"
			v-model="monthVal"
			v-model:show="monthShow"
			:maxDate="Number(new Date())"
			:minDate="-315619200000"
			:formatter="formatter"
			@cancel="monthShow = false"
			@confirm="monthConfirm"
		></up-datetime-picker>
	</u-popup>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { baseUrl } from '../api/app';
import { LoginCenterApi } from '../api/serves';
import { getCurrentInstance } from 'vue';
import { useCounter } from '../mixins/userHooks';
import { onReady } from '@dcloudio/uni-app';
let { tool, getUserInfo, userInfo } = useCounter();
// 响应式状态
const monthVal = ref(0);
const monthShow = ref(false);
const rule = ref(1);
const is_info = ref(false);
const isAgree = ref(false);
const formData = ref({
	avatar: '', //头像
	nickName: '', //微信昵称
	sex: '', //微信昵称
	birthday: '', //微信昵称
	mobile: '' //手机号码
});

const formatter = (type, value) => {
	if (type === 'year') {
		return `${value}年`;
	}
	if (type === 'month') {
		return `${value}月`;
	}
	if (type === 'day') {
		return `${value}日`;
	}
	return value;
};
const monthConfirm = (e) => {
	console.log(e, '月份');
	formData.value.birthday = tool.formatting(e.value, 'YYYY-MM-DD');
	monthShow.value = false;
};
// 方法定义
const open = () => {
	for (let k in formData.value) {
		formData.value[k] = userInfo.value[k];
	}
	is_info.value = true;
};
const emit = defineEmits(['perfect_info']);
const perfect_info = () => {
	for (let k in formData.value) {
		if (!formData.value[k]) return tool.alert('请完善信息');
	}
	if (!isAgree.value) return tool.alert('请阅读并同意《用户隐私政策条款》和《平台用户协议》');

	LoginCenterApi.perfect_info({ ...formData.value }).then(({ code, data, msg }) => {
		if (code != 1) return tool.alert(msg);
		getUserInfo();
		is_info.value = false;
		emit('perfect_info');
	});
};

const getphonenumber = async (e) => {
	if (!e.detail.encryptedData) return tool.alert('授权失败');
	console.log(e);
	const { code, data, msg } = await LoginCenterApi.decryptData({
		jsCode: e.detail.code
	});
	if (code != 1) return tool.alert(msg);
	formData.value.mobile = data.phoneNumber;
	getUserInfo();
};

const chooseavatar = (e) => {
	// formData.value.avatar = e.detail.avatarUrl;
	uni.uploadFile({
		url: baseUrl + 'file/upload',
		filePath: e.detail.avatarUrl,
		name: 'file',
		header: {
			Authorization: tool.storage('token').token
		},
		success: (res) => {
			console.log(JSON.parse(res.data).data, 'JSON.parse(res.data).data');
			formData.value.avatar = JSON.parse(res.data).data.data;
		}
	});
};

// 暴露方法供父组件调用
defineExpose({
	open
});
</script>

<style scoped lang="scss">
::v-deep .u-radio-group--row {
	gap: 20rpx 80rpx !important;
}
::v-deep .u-radio__icon-wrap--square {
	border-radius: 0 !important;
}
::v-deep .u-form-item__body {
	padding: 0;
}
.popup {
	width: 743rpx;
	height: 1043rpx;
	background-size: 100%;
	background-repeat: no-repeat;
	.content {
		width: 75%;
		height: 70%;

		margin: 18% auto 0;
	}
}
.userInfo {
	width: 750rpx;
	min-height: 663rpx;
	flex-shrink: 0;
	padding: 50rpx 30rpx;
	input,
	button {
		width: 379rpx;

		color: #666;
		font-size: 28rpx;
	}
}
.text {
	text {
		color: #000;
	}
	.raido {
		width: 26rpx;
		height: 26rpx;
		border-radius: 50%;
		background-color: transparent;
		border: solid 2rpx #000;
		padding: 2rpx;
		.true {
			width: 18rpx;
			height: 18rpx;
			flex-shrink: 0;
			border-radius: 50%;
			background-color: #000;
		}
	}
}
.btn {
	width: 280rpx;
	height: 86rpx;
	background-color: #000;
	color: #fff;
	font-size: 32rpx;
	font-weight: 600;
	border-radius: 60rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
